<template>
    <div class="container">
        <div class="search-content">
            <el-form ref="searchForm" :inline="true" :model="searchContent">
                <el-form-item label="线路ID：" prop="line_index">
                    <el-input
                        v-model="searchContent.line_index"
                        placeholder="线路ID">
                    </el-input>
                </el-form-item>
				<el-form-item label="线路名称：" prop="line_name">
                    <el-input
                        v-model="searchContent.line_name"
                        placeholder="线路名称"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table :data="dataList" border :height="oHeight" :fit="true">
                <el-table-column align="center" prop="id" label="ID" min-width="60"></el-table-column>
				<el-table-column align="center" prop="line_index" label="线路ID" min-width="60"></el-table-column>
                <el-table-column align="center" prop="line_number" label="线路号码" min-width="120"></el-table-column>
                <el-table-column align="center" prop="line_name" label="线路名称" min-width="120"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" min-width="100" #default="{ row }">
                    <el-switch
                        v-model="row.status"
                        active-value="2"
                        inactive-value="1"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="val => hangleStatus(row.id, val)">
                    </el-switch>
                </el-table-column>
                <el-table-column align="center" prop="supplier_name" label="供应商" min-width="120"></el-table-column>
                <el-table-column align="center" prop="remark" label="备注" min-width="150"></el-table-column>
                <el-table-column
                    fixed="right"
                    align="center"
                    prop="isInitiative"
                    label="操作"
                    width="140">
                    <template #default="{row}">
                        <el-button type="text" @click="handleLine('edit', row)">编辑</el-button>
                        <el-button type="text" @click="hanleDelLine(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom flex-item">
                <div class="btn-group">
                    <el-button type="primary" class="btn-bottom" @click="handleLine('add')">新增</el-button>
                </div>
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageArr.curpage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageArr.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageArr.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <line-drawer ref="editDrawer"></line-drawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import LineDrawer from './drawer';
import { objScreen } from "@/common/js/util";
export default {
    components: { LineDrawer },
    data() {
        return {
            searchContent: {
                line_index: '',       // 线路ID
				line_name: '',        // 线路名称
                is_search: false      // 是否处于搜索
            },
            oHeight: 800,
            scenarioslist:[],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],
            statusType: {
                "s1": {label: "关闭", color: 'info'},
                "s2": {label: "开通", color: 'success'}
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        hangleStatus(id, val) {
            this.$http.post("/admin/dataService/index.php?act=callLine&op=lineStatusSet", { id, tag: val == 1 ? 'close' : 'open' })
            .then(res => {
                if (res.code !== 1) {
				    this.$message.success(res.msg);
                }
            }).catch(err => {
                this.$message.error(`${err}`);
            })
        },
        handleLine(type = 'add', row) {
            if (type === 'add') {
                this.$refs.editDrawer.show_dialog_fn('add', row)
            } else {
                this.$refs.editDrawer.show_dialog_fn('edit', row)
            }
        },     
		hanleDelLine({ id }){
            this.$confirm('确定删除吗?')
            .then(() => {
			    this.$http.post("/admin/dataService/index.php?act=callLine&op=lineDel", { id })
                .then(res => {
                    if (res.code === 1) {
			    		this.getData();
                    }
			    	this.$message.success(res.msg);
                }).catch(err => {
                    this.$message.error(`${err}`);
                })
            }).catch(() => { });
		},
        getData() {
            let datas = {
                each_num: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            datas = objScreen(datas);
            this.$http.post('/admin/dataService/index.php?act=callLine&op=list', datas).then((res) => {
                if (res.code === 1) {
                    this.pageArr.total = parseInt(res.data.totalNum)
                    this.dataList = res.data.list;
                } else {
                    this.pageArr.total = 0;
                    this.dataList = [];
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err
                })
            })
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-content-input {
    width: 200px;
}
.color-success { color: #67C23A }
.color-info { color: #999999 }
</style>